<!DOCTYPE html><html lang=en><head><meta name=referrer content=never><meta charset=UTF-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Document</title><link rel=stylesheet href=../src/tools/bootstrap-3.3.7-dist/css/bootstrap.min.css><link rel=stylesheet href=../src/css/base.css><link rel=stylesheet href=../src/css/cart.css><style>.shouye{display:block;width:80px;height:40px;line-height:40px;font-size:30px;background:pink;text-align:center;color:#000;border-radius:15px}</style></head><body><h1>我是一个购物车页面</h1><span class=shouye><a class=shouye href=./index1.html>首页</a></span><div class=container></div><script src=../src/tools/jquery.min.js></script><script>// 调用函数 动态渲染生成页面
      setPage();

      // 使用 js的事件委托语法 添加点击事件
      $(".container").click(function (event) {
        // 根据 触发事件的事件对象标签不同 触发执行不同的程序

        // 获取 当前 localStorage 中 存储的 购物车数据
        const cart = JSON.parse(window.localStorage.cart);

        // 点击标签 name 是 all 点击的是全选input标签
        // 给 数组中 所有商品 buy属性 赋值
        // 赋值的数据 是 全选标签 checked属性值
        // 将 新的数组 以json字符串的形式 存储给 localStorage
        // 再次调用函数 动态渲染生成新的页面
        if ($(event.target).attr("name") === "all") {
          // 循环遍历 cart数组 给所有对象中buy属性 赋值
          // 赋值的数据是 全选标签 checked属性值

          cart.forEach((item) => {
            item.buy = $(event.target).prop("checked");
          });
          // 点击标签 name 是 other 点击的是其他input标签
          // 给 点击的标签 对应的 数组中的对象 buy属性 赋值
          // 赋值的属性值 是 其他input标签 checked的属性值
          // 将 新的数组 以json字符串的形式 存储给 localStorage
          // 再次调用函数 动态渲染生成新的页面
        } else if ($(event.target).attr("name") === "other") {
          // 点击标签 goods_id属性的属性值 就是 这个商品的goods_id
          // 和 数组中对象的goods_id 如果相同
          // 就给 这个 数值中的对象 buy 属性赋值

          for (let i = 0; i <= cart.length - 1; i++) {
            // 如果 当前点击标签 存储的 goods_id
            // 和 数组中循环对象 goods_id 相同
            // 给 当前这个数组中 循环对象 buy 属性 赋值
            // 赋值的是 点击标签 checked属性值

            if ($(event.target).attr("goods_id") === cart[i].goods_id) {
              cart[i].buy = $(event.target).prop("checked");
              break;
            }
          }

          // 点击标签 name 是 - 点击的是 - 标签
          // 给 点击的标签 对应的 数组中的对象 num属性 累减1
          // 最小值 不能 小于 1
          // 将 新的数组 以json字符串的形式 存储给 localStorage
          // 再次调用函数 动态渲染生成新的页面
        } else if ($(event.target).attr("name") === "-") {
          // 点击标签 goods_id属性的属性值 就是 这个商品的goods_id
          // 和 数组中对象的goods_id 如果相同
          // 就给 这个 数值中的对象 buy 属性赋值

          for (let i = 0; i <= cart.length - 1; i++) {
            // 如果 当前点击标签 存储的 goods_id
            // 和 数组中循环对象 goods_id 相同
            // 给 当前这个数组中 循环对象 num属性 存储数据 累减1
            if ($(event.target).attr("goods_id") === cart[i].goods_id) {
              cart[i].num--;
              break;
            }
          }

          // 点击标签 name 是 + 点击的是 + 标签
          // 给 点击的标签 对应的 数组中的对象 num属性 累加1
          // 最大值 不能 大于 库存
          // 将 新的数组 以json字符串的形式 存储给 localStorage
          // 再次调用函数 动态渲染生成新的页面
        } else if ($(event.target).attr("name") === "+") {
          // 点击标签 goods_id属性的属性值 就是 这个商品的goods_id
          // 和 数组中对象的goods_id 如果相同
          // 就给 这个 数值中的对象 buy 属性赋值

          for (let i = 0; i <= cart.length - 1; i++) {
            // 如果 当前点击标签 存储的 goods_id
            // 和 数组中循环对象 goods_id 相同
            // 给 当前这个数组中 循环对象 num属性 存储数据 累加1
            if ($(event.target).attr("goods_id") === cart[i].goods_id) {
              cart[i].num++;
              break;
            }
          }

          // 点击标签 name 是 del 点击的是 删除 标签
          // 给 点击的标签 对应的 数组中的对象 删除
          // 因为没有重复的对象 不需要考虑 数组坍塌
          // 将 新的数组 以json字符串的形式 存储给 localStorage
          // 再次调用函数 动态渲染生成新的页面
        } else if ($(event.target).attr("name") === "del") {
          // 弹出确认框
          if (!window.confirm(`您确定要删除吗?`)) {
            return;
          }

          // 点击标签 goods_id属性的属性值 就是 这个商品的goods_id
          // 和 数组中对象的goods_id 如果相同
          // 就给 这个 数值中的对象 buy 属性赋值
          for (let i = 0; i <= cart.length - 1; i++) {
            // 如果 当前点击标签 存储的 goods_id
            // 和 数组中循环对象 goods_id 相同
            // 从 数组中删除这个对应的对象
            if ($(event.target).attr("goods_id") === cart[i].goods_id) {
              cart.splice(i, 1);
              break;
            }
          }
        }
        // 将 新数组 以 json字符串形式 设定给 localStorage 中的 购物车键值对
        window.localStorage.cart = JSON.stringify(cart);

        // 再次调用函数 根据 新的 购物车数据 再次动态渲染生成新的页面
        setPage();
      });

      // 动态生成页面函数
      function setPage() {
        // 定义变量 存储 计算结果
        let type = 0;
        let number = 0;
        let money = 0;

        // 全选标签 checked 属性
        let flag = true;

        // 判断 有没有 购车车键值对
        if (window.localStorage.cart === undefined) {
          // 还没有创建 购物车键值对 生成 对应的 空页面内容
          $(".container").html(
            "<h1>您还没有购物记录,请您先去添加购买商品</h1>"
          );
        } else {
          // 已经创建了购物车键值对 需要获取购物车键值对的数据
          // 数据是 json字符串 需要转化为 对应的数据类型
          const cart = JSON.parse(window.localStorage.cart);

          // 如果 是 一个空数组 生成对应的空页面
          if (cart.length === 0) {
            // 购物车是空数组 对应的 空页面
            $(".container").html("<h1>您的购物车已经被好心人清空了</h1>");

            // 如果 不是 空数组 根据 购物车数组 动态生成页面
          } else {
            let str = "";

            // li标签 之前的部分 是 固定的内容
            str += `
            <div class="panel panel-info ">
          <div class="panel-body bg-info">
            <div class="checkbox">
              <label>
                <input name="all" type="checkbox" value="">
                全选
              </label>
            </div>
          </div>
          <div class="panel-footer">
            <ul class="cart-list">
            `;

            // li标签 是 根据数组动态生成的
            cart.forEach((item, key) => {
              // 如果 item 中 buy 属性 存储的是 true
              // 累加当前商品的 购买种类购买数量 购买金额
              if (item.buy) {
                type++;
                number += item.num;
                money += item.num * item.goods_price;
              } else {
                // 当前循环商品 如果购买状态是 false 也就是 不要购买状态
                // 给 全选标签 checked 属性值 赋值 false;
                flag = false;
              }

              // 定义标签时 根据 数据库数据 定义 属性属性值

              str += `
          <li class="cart-item">
              <div class="left">
                <input name="other" goods_id="${
                  item.goods_id
                }" type="checkbox" ${item.buy === true ? "checked" : ""}>
              </div>
              <div class="right">
                <div class="media">
                  <div class="media-left">
                    <a href="#">
                      <img class="media-object" src="${
                        item.goods_small_logo
                      }" alt="...">
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">${item.goods_name}</h4>
                    <p>
                      <i class="glyphicon glyphicon-yen"></i>
                      <span>${item.goods_price}</span>
                    </p>
                    <div class="btn-group pull-right" role="group" aria-label="...">
                      <button name="-" goods_id="${
                        item.goods_id
                      }" type="button" class="btn btn-default" ${
                item.num === 1 ? "disabled" : ""
              }>-</button>
                      <button type="button" class="btn btn-default" disabled>${
                        item.num
                      }</button>
                      <button name="+" goods_id="${
                        item.goods_id
                      }"  type="button" class="btn btn-default" ${
                item.num === Number(item.goods_number) ? "disabled" : ""
              }>+</button>
                    </div>
                    <button name="del" goods_id="${
                      item.goods_id
                    }" class="del btn btn-danger">我不要了</button>

                  </div>
                </div>
              </div>
            </li>
        `;
            });
            // li标签 之后的部分 是 固定的内容
            str += `
          </ul>
        </div>

        <div>
          <h1>您一共购买 ${type} 种 商品</h1>
          <h1>您一共购买 ${number} 件 商品</h1>
          <h1>您一共支付 ${money.toFixed(2)} 元 商品</h1>
        </div>   
            `;

            // 将 字符串 写入 标签中
            $(".container").html(str);
            // 循环结束 将 全选标签 checked属性设定
            $('[name="all"]').prop("checked", flag);
          }
        }
      }</script></body></html>